<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-07 09:36:16
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-27 21:38:49
 * @Description: 菜单树形单选
 -->
<template>
  <div ref="reference">
    <fks-popover
      ref="popover"
      placement="bottom"
      :width="inputWidth"
      trigger="click"
      @show="visible = true"
      @hide="visible = false"
    >
      <fks-input
        v-model="keywords"
        size="mini"
        style="margin-bottom: 8px"
        maxlength="50"
        :placeholder="LANG.SEARCH_RESOURCE"
      />
      <fks-tree
        ref="tree"
        :data="resources"
        :props="props"
        node-key="id"
        style="max-height: 200px; overflow: auto"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        show-checkbox
        :default-checked-keys="defaultCheck"
        :check-strictly="true"
        @check="handleChange"
      >
        <span slot-scope="{ data }">
          {{ data.content.name }}
        </span>
      </fks-tree>
    </fks-popover>
    <fks-input
      v-popover:popover
      :value="value.join(',')"
      clearable
      maxlength="50"
      :suffix-icon="visible ? 'fks-icon-arrow-up' : 'fks-icon-arrow-down'"
      style="cursor: pointer"
      :placeholder="LANG.SELECT_HOLDER"
      @clear="handleClear"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import {
  addResizeListener,
  removeResizeListener
} from 'fawkes-lib/lib/utils/resize-event'
import * as Auth from '../../api'
export default {
  name: 'ResourceSelect',
  props: {
    value: {
      type: Array
    },
    url: {
      type: String
    }
  },
  data() {
    return {
      visible: false,
      props: {
        label: 'title',
        children: 'children'
      },
      defaultCheck: [],
      inputWidth: '310',
      keywords: '',
      resources: []
    }
  },
  watch: {
    url() {
      this.getResourceTree()
    },
    value: {
      deep: true,
      immediate: true,
      handler: function () {
        this.defaultCheck = this.value
      }
    },
    keywords(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    //监听resize事件，改变选择框宽度
    this.getResourceTree()
    this.$nextTick(() => {
      const reference = this.$refs.reference
      addResizeListener(reference, this.handleResize)
      this.handleResize()
    })
  },
  beforeDestroy() {
    const reference = this.$refs.reference
    removeResizeListener(reference, this.handleResize)
  },

  methods: {
    /**
     * @description: 点击节点
     * @param {type}
     * @return:
     */
    handleChange(node, { checkedKeys }) {
      this.$emit('input', checkedKeys)
    },
    /**
     * @description: 树节点过滤
     * @param {type}
     * @return:
     */
    filterNode(value, data) {
      if (!value) return true
      return (
        (this.LANG[data.content.name] || data.content.name).indexOf(value) !==
        -1
      )
    },
    /**
     * @description: 宽度resize
     * @param {type}
     * @return:
     */

    handleResize() {
      this.$nextTick(() => {
        let reference = this.$refs.reference
        this.inputWidth = Math.max(
          reference.getBoundingClientRect().width - 20,
          200
        )
      })
    },
    /**
     * @description: 获取树
     * @param {type}
     * @return:
     */
    getResourceTree() {
      if (!this.url) {
        return false
      }
      return new Promise((resolve) => {
        Auth.checkUrl(this.url)
          .then((res) => {
            if (res.status) {
              this.resources = [...res.data]
            } else {
              this.resources = []
            }
            resolve(true)
          })

          .catch(() => {
            this.resources = []
            resolve(true)
          })
      })
    },
    handleClear() {
      this.$refs.tree.setCheckedKeys([])
      this.handleChange(null, { checkedKeys: [] })
    }
  }
}
</script>

<style scoped>
</style>
